<template>
  <div>
    <el-row class="row_style">
      <el-col :span="6" v-for="list in menu" :key="list" class="nav">
        <h2 @click="linkTo(list.path)">{{ list.name }}</h2>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menu: [
        { name: "首页", path: "index" },
        { name: "歌单", path: "collectPage" },
        { name: "歌手", path: "singer" },
        { name: "个人中心", path: "myMusic" }
      ]
    };
  },
  methods: {
    linkTo(path) {
      this.$router.push(path);
    }
  }
};
</script>
<style scoped>
.row_style {
  background-color: white;
  box-shadow: 0 0 10px black;
}
.nav:hover {
  background-color: #475669;
  color: #c6dcf2;
}
.nav:after {
  background-color: #475669;
  color: #c6dcf2;
}
</style>
